<template>
  <div class="page">
    <exchange-toolbar />
    <exchange-balance v-if="loggedIn && (activeIndex === 0 || activeIndex === 1)" :coin-name="coin" />
    <div class="tabPanel jiaoyiqu">
      <div class="tabtitle">
        <li
          v-for="(item, index) in tabList"
          :key="item.text"
          :class="{ hit: item.active }"
          @click="handleClick(index)"
        >
          {{ $t(item.text) }}
        </li>
      </div>
      <div class="panes">
        <exchange-trade-panel v-if="activeIndex === 0" type="buy" :name="$t('买入')" />
        <exchange-trade-panel v-else-if="activeIndex === 1" type="sell" :name="$t('卖出')" />
        <exchange-pending-order v-else-if="activeIndex === 2" />
        <exchange-history-order v-else />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { SET_SYMBOL } from '@/constants/mutation-types'
import exchangeToolbar from '@/components/partials/exchange/index/Toolbar'
import exchangeBalance from '@/components/partials/exchange/index/Balance'
import exchangeTradePanel from '@/components/partials/exchange/index/TradePanel/index.vue'
import exchangePendingOrder from '@/components/partials/exchange/index/PendingOrder'
import exchangeHistoryOrder from '@/components/partials/exchange/index/HistoryOrder'
export default {
  components: { exchangeToolbar, exchangeBalance, exchangeTradePanel, exchangePendingOrder, exchangeHistoryOrder },
  fetch ({ store, route }) {
    const symbol = route.query.symbol
    if (symbol) {
      store.commit(`exchange/${SET_SYMBOL}`, symbol)
    }
  },
  data () {
    const activeIndex = ~~this.$route.query.tab
    const tabList = [
      {
        text: '买入',
        active: false
      },
      {
        text: '卖出',
        active: false
      },
      {
        text: '当前委托',
        active: false
      },
      {
        text: '成交记录',
        active: false
      }
    ]
    if (tabList[activeIndex]) {
      tabList[activeIndex].active = true
    }
    return {
      tabList,
      activeIndex
    }
  },
  computed: {
    ...mapState({
      loggedIn: ({ auth }) => auth.loggedIn,
      symbol: ({ exchange }) => exchange.symbol
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    }),
    coin () {
      if (this.activeIndex === 1) {
        return this.coinPair.stock
      }
      return this.coinPair.money
    }
  },
  watch: {
    symbol (val) {
      if (val) {
        this.subscribeDeals(val)
      }
    }
  },
  beforeMount () {
    this.subscribeDeals(this.symbol)
  },
  methods: {
    ...mapActions({
      subscribeDeals: 'exchange/subscribeDeals'
    }),
    handleClick (index) {
      if (this.activeIndex === index) { return }
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
      this.$router.replace(`?symbol=${this.symbol}&tab=${index}`)
    }
  },
  head () {
    return {
      title: this.$t('币币交易')
    }
  }
}
</script>
<style scoped>
.page {
  padding-top: 90px;
}
.tabtitle {
  position: fixed;
  top: 50px;
}
</style>
